<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 遍历数据 -->
        <input type="text" placeholder="输入名字" v-model="keywords">
        <ul>
            <li v-for="(p,index) in filPersons" :key="p.id">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li> 
        </ul>
        
    </div>
    

    <script>
        Vue.config.productionTip = false;
        //#region 
        /* new Vue({
            el: '#root',
            data: {
                keywords:'',
                persons: [
                    {id:'001',name:"马冬",age:30},
                    {id:'002',name:"马冬梅",age:18},
                    {id:'003',name:"梅艳芳",age:18},
                    {id:'004',name:"王艳",age:18}
                ],
                filPersons:[]
            },
            methods: {
                
            },
            watch:  {
                // ---  默认没有选择值  ---
                // keywords(nv){
                //     this.filPersons = this.persons.filter((p)=>{
                //         return p.name.indexOf(nv) !== -1;
                //     })
                // }
                keywords:{
                    immediate: true, // 先调用一次
                    handler(nv){
                        this.filPersons = this.persons.filter((p)=>{
                            return p.name.indexOf(nv) !== -1;
                        })
                    }
                }
            }
        }) */
       //#endregion
       new Vue({
            el:"#root",
            data:{
                keywords:'',
                persons:[
                    {id:'001',name:"马冬",age:30},
                    {id:'002',name:"马冬梅",age:18},
                    {id:'003',name:"梅艳芳",age:18},
                    {id:'004',name:"王艳",age:18}
                ]
            },
            // compted(计算属性) 和 watch(观察模式) 都能实现功能时 优先使用computed
            computed: {
                filPersons(){
                    // 返回filPersons
                    return this.filPersons = this.persons.filter((p)=>{
                        // 返回计算结果
                        return p.name.indexOf(this.keywords) !== -1;
                    })
                }
            }
       })
    </script>

</body>
</html>